<template>
  <div class="box">
    <p>入金请求</p>
    <hr />
    <!-- 搜索框 -->
    <div class="serch-box">
      <el-input
        placeholder="收款账号"
        v-model="searchbox.input"
        @change="search"
        clearable
      >
      </el-input>
      <!-- 商户 -->
      <DropDownOptions
        :options="selectdownAccountList"
        :placeholder="selectdownAccount"
        @blur="selectdownAccountFuc"
      />
      <!-- 状态 -->
      <DropDownOptions
        :options="selectdownStateList"
        :placeholder="selectdownState"
        @blur="selectdownStateFuc"
      />
      <!-- 卡商 -->
      <DropDownOptions
        :options="selectdownCardDealerList"
        :placeholder="selectdownCardDealer"
        @blur="selectdownCardDealerFuc"
      />
      <SelectTime @blur="serchTime" />
      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
    </div>
    <!-- 表格 -->
    <div class="table">
      <TableHeader :headerData="headerData" />
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          show-overflow-tooltip
          v-for="item in tableLabel"
          align="center"
          :key="item.prop"
          :label="item.label"
          :width="item.width ? item.width : 'auto'"
          :sortable="item.prop == 'name' || item.prop == 'date' ? true : false"
        >
          <template slot-scope="scope">
            <template
              v-if="item.prop == 'creat_time'"
              with="300"
              style="margin-left: 10px"
              >{{ $timer(scope.row[item.prop]) }}</template
            >
            <template v-else-if="item.prop == 'state'">
              <span v-if="scope.row[item.prop] != '未处理'">{{
                scope.row[item.prop]
              }}</span>
              <!-- <span v-else-if="scope.row[item.prop] == '2'">审核成功</span> -->
              <template v-else>
                <el-tag
                  type="info"
                  @click="handleAppoint(scope.row), (dialogTableVisible = true)"
                  disable-transitions
                  >指定卡商</el-tag
                >
                <el-tag
                  type="danger"
                  @click="okRefuse(scope.row)"
                  disable-transitions
                  >通过</el-tag
                >
                <el-tag
                  type="danger"
                  @click="handleRefuse(scope.row)"
                  disable-transitions
                  >拒绝</el-tag
                >
              </template>
            </template>

            <span v-else style="margin-left: 10px">{{
              scope.row[item.prop]
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="指定卡商"
      :visible.sync="dialogTableVisible"
      width="300px"
    >
      <DropDownOptions
        :options="selectdownCardDealerList"
        :placeholder="selectdownCardDealer"
        @blur="selectdownCardDealerFuc"
        style="width: 250px"
      />
      <div style="display: flex; justify-content: center; margin-top: 30px">
        <el-button type="primary" @click="submitForm('DeductionMoney')"
          >提交</el-button
        >
        <el-button @click="resetForm('DeductionMoney')">取消</el-button>
      </div>
    </el-dialog>
    <!-- 页码 -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="config.total"
      :current-page.sync="config.page"
      @size-change="handleSizeChange"
      @current-change="changePage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="config.limit"
    >
    </el-pagination>
  </div>
</template>

<script>
import TableHeader from "../../components/MerchantManagement/BusinessListings/TableHeader.vue";
import DropDownOptions from "../../components/MerchantManagement/BusinessListings/DropDownOptions.vue";
import SelectTime from "../../components/MerchantManagement/BusinessListings/SelectTime.vue";
export default {
  data() {
    return {
      //下拉搜索框提示信息
      selectdownAccount: "商户",
      selectdownState: "状态",
      selectdownCardDealer: "卡商",
      //弹窗
      dialogTableVisible: false,
      //搜索框里的内容
      selectdownAccountList: [
        //商户
        {
          value: "选项1",
          label: "黄金糕111",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      selectdownStateList: [
        //状态
        //状态
        {
          value: "1",
          label: "未审核",
        },
        {
          value: "2",
          label: "冲正",
        },
        {
          value: "3",
          label: "代付",
        },
        {
          value: "4",
          label: "扣款",
        },
        {
          value: "5",
          label: "退款",
        },
        {
          value: "6",
          label: "提现成功",
        },
        {
          value: "7",
          label: "充值成功",
        },
      ],
      selectdownCardDealerList: [
        //卡商
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      //搜索框的状态
      searchbox: {
        input: "",
        Account: "",
        State: "",
        CardDealer: "", //卡商名字
        serchTime: "",
      },
      headerData: [
        {
          name: "商户总余额",
          MerchantAmount: "2000000",
        },
      ],
      tableLabel: [
        {
          prop: "merchant_name",
          label: "商户名称",
        },
        {
          prop: "alternations_amount",
          label: "充值金额",
        },
        {
          prop: "card_dealer_name",
          label: "卡商",
        },
        {
          prop: "operator",
          label: "操作人",
        },
        {
          prop: "creat_time",
          label: "充值时间",
        },
        {
          prop: "state",
          label: "操作",
        },
      ],
      tableData: [],
      config: {
        page: 1,
        limit: 10,
        total: 1000,
      },
    };
  },
  mounted() {
    this.gitTable();
  },
  methods: {
    //请求数据
    gitTable() {
      //列表
      this.$axios({
        url: "/queryDepositRequest",
        method: "GET",
        params: {
          limit: 10,
          page: 1,
        },
      })
        .then((res) => {
          this.tableData = [...res.data.data];
          console.log("入金请求列表数据", res);
        })
        .catch((err) => {
          console.log(err);
        });

      //商户下拉
      this.$axios({
        url: "/system/admin/mm/depositrecord/selectrjjlSh",
        method: "GET",
        params: {},
      })
        .then((res) => {
          console.log("商户下拉", res);
          let Data = [...res.data.data];
          this.selectdownAccountList = this.drownList(Data);
        })
        .catch((err) => {
          console.log("商户下拉", err);
        });

      //状态下拉
      this.$axios({
        url: "/archStatus",
        method: "GET",
        params: {},
      })
        .then((res) => {
          console.log("状态下拉", res);
          // let Data = [...res.data.data];
          // let typeData = this.drownList(Data);
          // this.selectdownStateList = this.typeData(typeData);
        })
        .catch((err) => {
          console.log("状态下拉", err);
        });

      //卡商下拉
      this.$axios({
        url: "/designatedCardDealer",
        method: "GET",
        params: {},
      })
        .then((res) => {
          console.log("卡商下拉", [...res.data.data]);
          let Data = [...res.data.data];
          this.selectdownCardDealerList = this.drownList2(Data);
        })
        .catch((err) => {
          console.log("卡商下拉", err);
        });
    },
    //请求数据
    //下拉遍历
    drownList(data) {
      let drownList = [];
      for (let i = 0; i < data.length; i++) {
        drownList.push({
          label: "",
          value: "",
        });
        drownList[i].label = data[i];
        drownList[i].value = i + 1;
      }
      console.log(drownList);
      return drownList;
    },

    drownList2(data) {
      let drownList = [];
      for (let i = 0; i < data.length; i++) {
        drownList.push({
          label: "",
          value: "",
        });
        drownList[i].label = data[i].card_dealer_name;
        drownList[i].value = i + 1;
      }
      console.log(drownList);
      return drownList;
    },

    search() {
      console.log(this.searchbox);
      if (this.searchbox === "") {
        // return this.gitTable();
      } else {
        this.$axios({
          url: "/querySubmitSearchDepositRequest",
          method: "GET",
          params: {
            id: this.searchbox.input,
            merchant_name: this.searchbox.Account, //商户
            state: this.searchbox.State, //状态
            card_dealer_name: this.searchbox.CardDealer, //卡商
            first_time: this.searchbox.serchTime[0],
            last_time: this.searchbox.serchTime[1],
            page: this.config.page,
            limit: this.config.limit,
          },
        })
          .then((res) => {
            this.tableData = [...res.data.data];
            console.log("搜索用户名:", res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    serchTime(v) {
      this.searchbox.serchTime = v;
      console.log(this.searchbox);
    },
    selectdownAccountFuc(v) {
      this.searchbox.Account = v;
      console.log(this.searchbox);
    },
    selectdownStateFuc(v) {
      this.searchbox.State = v;
      console.log(this.searchbox);
    },
    selectdownCardDealerFuc(v) {
      this.searchbox.CardDealer = v;
      console.log(this.searchbox);
    },
    handleAppoint(row) {
      this.tableRow = row;
      //指定卡商
      console.log("指定:", row);
    },
    handleRefuse(row) {
      //拒绝
      this.tableRow = row;
      console.log(row.id);
      this.$confirm("此操作将拒绝, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios({
            url: "",
            method: "POST",
            data: { id: row.id, type_id: 2 },
          })
            .then((res) => {
              if (res.data.code) {
                this.$message({
                  type: "success",
                  message: "拒绝成功!",
                });
                this.gitTable();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    //通过
    okRefuse(row) {
      this.tableRow = row;
      console.log("通过:", row);
      console.log(row.id);
      this.$confirm("是否通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios({
            url: "",
            method: "POST",
            data: { id: row.id, type_id: 1 },
          })
            .then((res) => {
              if (res.data.code) {
                this.$message({
                  type: "success",
                  message: "已通过!",
                });
                this.gitTable();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
//提交 指定卡商
    submitForm() {
      if (this.searchbox.CardDealer === "") {
        return;
      } else {
        this.$axios({
          url: "/designatedCardDealer",
          method: "GET",
          params: {
            id: this.tableRow.id,
            card_dealer_name: this.searchbox.CardDealer,
          },
        })
          .then((res) => {
            this.dialogTableVisible= false,
            console.log('指定卡商',res);
            if (res.data.code === 200) {
              this.$message({
                type: "success",
                message: "指定成功!",
              });
              this.gitTable();
            }
          })
          .catch((err) => {
            console.log(err);
          });
          
      }
      
    },
    resetForm(formName) {
      //取消
      this.dialogTableVisible= false,
      this.$refs[formName].resetFields();
    },
    changePage(page) {
      //点击页码
      this.config.page = page;
      console.log(page);
      this.gitTable();
    },
    handleSizeChange(val) {
      //点击每页展示
      console.log(val);
    },
  },
  components: {
    TableHeader,
    DropDownOptions,
    SelectTime,
  },
};
</script>

<style scoped>
.serch-box {
  width: 100%;
  height: 100%;
  display: flex;
}
.el-input {
  width: 200px;
  margin-right: 10px;
}
.box {
  padding: 15px;
  background-color: rgb(255, 255, 255);
}
.block,
.el-select {
  padding-right: 10px;
}
.table {
  margin-top: 20px;
}

.el-tag {
  margin: 0 5px;
}
</style>